<template>
  <div class="debug-panel">
    <!-- 工具栏 -->
    <div class="toolbar">
      <h3>矢量瓦片测试 - Vue3</h3>
      <div class="button-group">
        <button @click="loadVectorTiles" :disabled="loading">
          {{ loading ? '加载中...' : '加载矢量瓦片' }}
        </button>
        <button @click="renderPOI" :disabled="!hasVectorData">
          渲染POI数据
        </button>
        <button @click="clearTiles">
          清除瓦片
        </button>
        <button @click="toggleInfo">
          {{ showInfo ? '隐藏' : '显示' }}瓦片信息
        </button>
      </div>

      <!-- 相机事件控制 -->
      <div class="control-group">
        <h4>相机事件控制</h4>
        <div class="button-group">
          <button @click="enableCameraEvents">启用相机事件</button>
          <button @click="disableCameraEvents">禁用相机事件</button>
        </div>
        <div class="input-group">
          <label>位置变化阈值(米):</label>
          <input type="number" v-model.number="positionThreshold" @change="setPositionThreshold" min="1000" max="500000"
            step="1000" />
        </div>
        <div class="input-group">
          <label>移动范围限制(米):</label>
          <input type="number" v-model.number="movementRangeLimit" @change="setMovementRangeLimit" min="10000"
            max="200000" step="5000" />
        </div>
      </div>

      <!-- POI渲染控制 -->
      <div class="control-group">
        <h4>POI渲染控制</h4>
        <div class="button-group">
          <button @click="enableAutoRenderPOI">启用自动POI渲染</button>
          <button @click="disableAutoRenderPOI">禁用自动POI渲染</button>
          <button @click="updateCollision">更新碰撞检测</button>
        </div>
      </div>

      <!-- 缓存管理 -->
      <div class="control-group">
        <h4>缓存管理</h4>
        <div class="button-group">
          <button @click="clearTileCache">清除瓦片缓存</button>
          <button @click="getCacheStats">获取缓存统计</button>
        </div>
      </div>

      <!-- 统计信息 -->
      <div class="stats" v-if="mapStore.getTileCount > 0">
        <h4>统计信息</h4>
        <div>瓦片数量: {{ mapStore.getTileCount }}</div>
        <div>POI数量: {{ mapStore.getPOICount }}</div>
        <div>可见POI: {{ mapStore.getVisiblePOICount }}</div>
        <div>状态: {{ status }}</div>
        <div v-if="mapStore.getLoadingStatus.isLoading">
          加载进度: {{ mapStore.getLoadingStatus.loadedCount }}/{{ mapStore.getLoadingStatus.totalCount }}
        </div>
        <div v-if="mapStore.cacheStats.tileCount > 0">
          缓存瓦片: {{ mapStore.cacheStats.tileCount }}
        </div>
        <div v-if="mapStore.cacheStats.totalSize > 0">
          缓存大小: {{ (mapStore.cacheStats.totalSize / 1024).toFixed(2) }} KB
        </div>
      </div>
    </div>

    <!-- 信息面板 -->
    <div class="info-panel" v-show="showInfo">
      <h4>瓦片详情</h4>
      <div class="info-content" v-html="tileInfo"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { cesiumMapStore } from '../stores/cesiumMap.js'

// Store
const mapStore = cesiumMapStore()

// 响应式状态
const loading = ref(false)
const showInfo = ref(false)
const status = ref('就绪')
const tileInfo = ref('点击"加载矢量瓦片"开始测试')

// 控制参数
const positionThreshold = ref(100000)
const movementRangeLimit = ref(50000)

// 计算属性
const hasVectorData = computed(() => mapStore.hasTileData)

// 事件处理方法
const loadVectorTiles = async () => {
  loading.value = true
  status.value = '加载矢量瓦片中...'

  try {
    const cesiumContainer = document.querySelector('.cesium-container')
    if (cesiumContainer) {
      cesiumContainer.dispatchEvent(new CustomEvent('load-vector-tiles'))
    }
  } catch (error) {
    status.value = '加载失败: ' + error.message
    console.error('加载矢量瓦片失败:', error)
  } finally {
    loading.value = false
  }
}

const renderPOI = () => {
  status.value = '渲染POI数据中...'
  const cesiumContainer = document.querySelector('.cesium-container')
  if (cesiumContainer) {
    cesiumContainer.dispatchEvent(new CustomEvent('render-poi'))
  }
}

const clearTiles = () => {
  status.value = '清除瓦片中...'
  const cesiumContainer = document.querySelector('.cesium-container')
  if (cesiumContainer) {
    cesiumContainer.dispatchEvent(new CustomEvent('clear-tiles'))
  }
  status.value = '已清除'
  tileInfo.value = '点击"加载矢量瓦片"开始测试'
}

const toggleInfo = () => {
  showInfo.value = !showInfo.value
}

// 相机事件控制
const enableCameraEvents = () => {
  const cesiumContainer = document.querySelector('.cesium-container')
  if (cesiumContainer) {
    cesiumContainer.dispatchEvent(new CustomEvent('enable-camera-events'))
  }
}

const disableCameraEvents = () => {
  const cesiumContainer = document.querySelector('.cesium-container')
  if (cesiumContainer) {
    cesiumContainer.dispatchEvent(new CustomEvent('disable-camera-events'))
  }
}

const setPositionThreshold = () => {
  const cesiumContainer = document.querySelector('.cesium-container')
  if (cesiumContainer) {
    cesiumContainer.dispatchEvent(new CustomEvent('set-position-threshold', {
      detail: { threshold: positionThreshold.value }
    }))
  }
}

const setMovementRangeLimit = () => {
  const cesiumContainer = document.querySelector('.cesium-container')
  if (cesiumContainer) {
    cesiumContainer.dispatchEvent(new CustomEvent('set-movement-range-limit', {
      detail: { limit: movementRangeLimit.value }
    }))
  }
}

// POI渲染控制
const enableAutoRenderPOI = () => {
  const cesiumContainer = document.querySelector('.cesium-container')
  if (cesiumContainer) {
    cesiumContainer.dispatchEvent(new CustomEvent('enable-auto-render-poi'))
  }
}

const disableAutoRenderPOI = () => {
  const cesiumContainer = document.querySelector('.cesium-container')
  if (cesiumContainer) {
    cesiumContainer.dispatchEvent(new CustomEvent('disable-auto-render-poi'))
  }
}

const updateCollision = () => {
  const cesiumContainer = document.querySelector('.cesium-container')
  if (cesiumContainer) {
    cesiumContainer.dispatchEvent(new CustomEvent('update-collision'))
  }
}

// 缓存管理
const clearTileCache = () => {
  const cesiumContainer = document.querySelector('.cesium-container')
  if (cesiumContainer) {
    cesiumContainer.dispatchEvent(new CustomEvent('clear-tile-cache'))
  }
}

const getCacheStats = () => {
  const cesiumContainer = document.querySelector('.cesium-container')
  if (cesiumContainer) {
    cesiumContainer.dispatchEvent(new CustomEvent('get-cache-stats'))
  }
}

// 监听来自CesiumContainer的事件更新
onMounted(() => {
  // 监听全局事件来更新store中的状态
  window.addEventListener('cesium-tile-info-updated', (event) => {
    const info = event.detail
    // 更新store中的瓦片信息
    mapStore.updateCurrentTileInfo(info)
    // 更新本地状态
    status.value = info.status || '完成'
    tileInfo.value = info.details || '无详细信息'
    if (loading.value) {
      loading.value = false
    }
  })
})
</script>

<style scoped>
.debug-panel {
  position: absolute;
  z-index: 1000;
  top: 0px;
}

.toolbar {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(42, 42, 42, 0.95);
  padding: 20px;
  border-radius: 8px;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  min-width: 320px;
  max-height: 80vh;
  overflow-y: auto;
}

.toolbar h3 {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #4fc3f7;
}

.control-group {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.control-group:last-child {
  border-bottom: none;
}

.control-group h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #81c784;
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 15px;
}

.toolbar button {
  padding: 10px 16px;
  background: linear-gradient(135deg, #42a5f5, #1e88e5);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.toolbar button:hover:not(:disabled) {
  background: linear-gradient(135deg, #1e88e5, #1565c0);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.toolbar button:disabled {
  background: #666;
  cursor: not-allowed;
  transform: none;
}

.input-group {
  margin-bottom: 10px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  color: #ccc;
}

.input-group input {
  width: 100%;
  padding: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: white;
  font-size: 14px;
}

.input-group input:focus {
  outline: none;
  border-color: #42a5f5;
  background: rgba(255, 255, 255, 0.15);
}

.stats {
  font-size: 12px;
  color: #ccc;
  line-height: 1.4;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stats h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #81c784;
}

.stats div {
  margin: 2px 0;
}

.info-panel {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(42, 42, 42, 0.95);
  padding: 20px;
  border-radius: 8px;
  color: white;
  max-width: 350px;
  max-height: 70vh;
  overflow-y: auto;
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.info-panel h4 {
  margin: 0 0 10px 0;
  color: #4fc3f7;
  font-size: 14px;
}

.info-content {
  line-height: 1.4;
}

.info-content :deep(strong) {
  color: #81c784;
}

/* 滚动条样式 */
.toolbar::-webkit-scrollbar,
.info-panel::-webkit-scrollbar {
  width: 6px;
}

.toolbar::-webkit-scrollbar-track,
.info-panel::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.toolbar::-webkit-scrollbar-thumb,
.info-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.toolbar::-webkit-scrollbar-thumb:hover,
.info-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}
</style>
